<!-- JILI数值效果 -->
<template>
  <div class="padding20">
    <div class="border-line">
      <el-form :model="data.query" :inline="true">
        <GameItem ref="GameItemRef" @query="queryGame" :allShow="false"/>
        <el-form-item label="RTP：">
          <el-select v-model="data.query.rtp" filterable placeholder="请选择" @change="getIdList">
            <el-option class="flexBetween" v-if="!data.rtpList.length" label="全部" :value="-1"/>
            <el-option class="flexBetween" v-for="item in data.rtpList" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="RTP效果：" >
          <el-select v-model="data.query.rtp_effect" placeholder="请选择" filterable @change="getIdList">
            <el-option v-for="item in data.effectList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="ID：" >
          <el-select class="formItem240" v-model="data.query.id" filterable placeholder="请选择">
            <el-option class="flexBetween" v-for="item in data.idList" :key="item.id" :label="item.id+'（'+item.rtp+'）-'+item.win_rate" :value="item.id">
              {{ item.id+' （'+item.rtp+'）-'+item.win_rate }}
              <el-icon class="delicon" @click.stop="deleteId(item)"><Remove /></el-icon>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button :disable="data.loadingHeightChart" icon="Search" type="primary" @click="getSearchList">查询</el-button>
        </el-form-item>
      </el-form>
      <el-button class="marginB10" type="warning" v-permiss="'/system/destroyManager'" icon="Pointer" size="small" @click="data.isShowDetails = true"> 模拟下注 </el-button>
      <div v-loading="data.loadingHeightChart">
        <MuilineLargeChart chartTitle="数值模拟效果" :xAxisData="data.HeightXAxis" :seriesData="data.HeightSeries" :legendData="data.HeightLegend"/>
      </div>
    </div>
  </div>

  <!-- 模拟下注 -->
  <el-dialog v-model="data.isShowDetails" title="玩家模拟下注" :close-on-click-modal="false" :close-on-press-escape="false"
    top="12vh" @close="onHideDetails">
    <div class="dialogMaxHeight">
      <p class="tipsTextRed" v-if="data.effectList.length == 6?true:false">* EX模式下注金额会乘以1.5倍</p>
      <form-item title="玩家模拟下注" :pass="true" value="bet" :subtract="true" @addItem="addBet">
        <div class="flex marginT5" v-for="(item, index) in data.betList" :key="index">
          玩家携带金额:
          <el-input-number v-model="item.money" :min="0" :max="99999999999999999999" :precision="4"
            class="width150 marginR10" placeholder="玩家携带金额" clearable :controls="false" />
          下注:
          <el-input-number v-model="item.bet" :min="0" :max="99999999999999999999" :precision="4"
            class="width150 marginR10" placeholder="下注" clearable :controls="false" />
          <div class="reduce-btn" @click="reduceBet(index)">-</div>
          <p class="marginL20" v-if="data.effectList.length == 6?true:false">EX金额：<span class="tipsTextRed">{{ BigTimes(item.bet,1.5) }}</span></p>
        </div>
      </form-item>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="info" size="small" @click="reset">重 置</el-button>
        <el-button icon="CircleCheck" type="primary" size="small" @click="getSearchList">确 认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage,ElMessageBox } from 'element-plus'
import GameItem, { type GameType } from '@/components/FormItem/GameItem.vue'
import MuilineLargeChart from '@/components/Echarts/muilineLargeChart.vue'
import { RtpType, RtpEffect } from '@/config/eunm'
import { throttle, selectToLabel, sortObjectArray } from '@/utils/index'
import { BigNumericalEffect,BigHundred,BigAbs,BigTimes  } from '@/utils/math'
import {
  getJiliGame,
  getJiliId,
  getJiliRtp,
  getJiliLineChart,
  deleteJili,
} from '@/api/config'

import { useStore } from '@/stores/index'
const indexStore = useStore()

const data = reactive({
  query: {
    platform: -1,
    game_id: -1,
    rtp: 0,
    rtps: '',
    rtp_effect: 1,
    slot_user_set:[],
    id: 0,
  },
  gameList: [] as any,
  rtpList: [] as any,
  effectList: [] as any,
  idList: [] as any,
  simulateList: [] as any,
  list: [],
  total: 0,
  HeightXAxis: [] as number[],
  HeightSeries: [] as any[],
  HeightLegend: [] as string[],
  loadingChart:false,
  loadingHeightChart:false,
  isShowDetails:false,
  betList: [{money:0, bet:0}] as any[],
})

// 游戏品牌 + 游戏
const queryGame = (item: GameType) => {
  data.query.platform = item.platform
  data.query.game_id = item.game_id
  chooseGame(item.game_id)
}

onMounted(async () => {
  GameItemRef.value.getGameType(1)
  getGameList()
})

// 新增玩家模拟下注
const getSearchList = async () => {
  data.HeightXAxis = []
  data.HeightSeries = []
  data.HeightLegend = []
  if(!data.query.id){
    return ElMessage.error('请选择正确的ID')
  }
  data.loadingHeightChart = true
  data.betList.forEach((item:any,index:number) => {
    item.id = index+1
  })
  if(!data.betList[0].money && !data.betList[0].bet ){
    data.query.slot_user_set = []
  }else{
    data.query.slot_user_set = data.betList as any
  }
  indexStore.setPageLoading(true)
  let res = await getJiliLineChart(data.query);
  Object.keys(res.data).forEach((item:string)=> {
    let arrNum = [] as any,markPointList=[] as any[]; // 标记小游戏;
    res.data[item].forEach((num:number,index:number) => {
      arrNum.push(Math.abs(num))
      if(num<0){
        markPointList.push({name: '小游戏', value: BigAbs(num), xAxis: index, yAxis: BigAbs(num)})
      }
    })
    // 默认
    if(!Number(item)){
      data.HeightLegend.push('收益倍数显示')
      data.HeightSeries.push({ name: '收益倍数显示', type: 'line', data: arrNum, markPoint:{data:markPointList} })
    }
    // 玩家
    data.betList.forEach((second:any)=> {
      if(second.id == item){
        data.HeightLegend.push('玩家'+(Number(item))+'('+BigNumericalEffect(second.bet,second.money)+')')
        data.HeightSeries.push({ name: '玩家'+(Number(item))+'('+BigNumericalEffect(second.bet,second.money)+')', type: 'line', 
          data: arrNum, markPoint:{data:markPointList}
        })
      }
    })
  })
  for (let index = 1; index < res.data[0].length+1; index++) {
    data.HeightXAxis.push(index)
  }
  data.isShowDetails  = false
  data.loadingHeightChart = false
}
const getGameList = async () => {
  let res = await getJiliGame({})
  data.gameList= res.data
  res.data.forEach((item:any) => {
    let arr=[] as any[];
    item.rtp?.forEach((second:number) => {
      arr.push({label:BigHundred(second)+'%',value:second})
    })
    item.rtp = arr
  })
  data.query.game_id = res.data[0].game_id
  data.rtpList = res.data[0].rtp
  data.query.rtp = res.data[0].rtp[0].value
  getIdList()
  getRtpEffectList(data.query.game_id)
}
const getIdList = async () => {
  let res = await getJiliId(data.query)
  data.idList= res.data
  data.query.id = res.data?res.data[0]?.id:0
  if(data.query.id){
    getSearchList()
  }
}
const getRtpEffectList = async (game_id:number) => {
  data.effectList = []
  let effect =  selectToLabel(RtpEffect,game_id,'data','value')?selectToLabel(RtpEffect,game_id,'data','value'):RtpType
  let res = await getJiliRtp(data.query)
  if(!res.data) return false
  data.query.rtp_effect = res.data[0]
  res.data?.forEach((item:number)=> {
    effect.forEach((second:any)=>{
      if(item == second.value){
        data.effectList.push({ label:selectToLabel(effect,item),value:item })
      }
    })
  })
  data.effectList = sortObjectArray(data.effectList,'value','asc')
}

// 选择游戏
const chooseGame = async (value:any) => {
  data.gameList.forEach((item:any) => {
    if(item.game_id == value){
      data.rtpList = item.rtp
      data.query.rtp = item.rtp[0].value
      getIdList()
      getRtpEffectList(value)
    }
  })
}

// 删除ID
const deleteId = async (value:any) => {
  ElMessageBox.confirm(`确定删除【${value.id}】(${value.rtp}) 的ID`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  }).then(async () => {
    let res = await deleteJili({ids:[value.id],game_id:data.query.game_id})
    ElMessage.success('删除成功')
    getIdList()
  }).catch(() => {})
}

// 玩家下注行为模拟
const addBet = () => {
  data.betList.push({ money: 0, bet: 0 })
}
const reduceBet = (index:number) => {
  if(!index  && data.betList.length == 1){
    return ElMessage.error('至少保留一个模拟下注')
  }
  data.betList.splice(index, 1)
}

// 重置
const reset = () => {
  data.betList = [{money:0, bet:0}]
}
const GameItemRef = ref<any>()
const onHideDetails = (show: boolean) => {
  data.isShowDetails = false
  if (show) {
    data.query = {
      platform: -1,
      game_id: -1,
      rtp: 0,
      rtps: '',
      rtp_effect: 1,
      slot_user_set:[],
      id: 0,
    }
  }
}
</script>

<style scoped lang="scss">
.margin {
  margin-top: -10px;
  margin-bottom: 20px;
}
.padding20 {
  background-color: var(--background);
}
.delicon :hover{
  color: red;
}
</style>
